import React, { Component } from "react";
import "./index.scss";
import * as api from "api/index";

class Browse extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: []
    };
  }

  componentDidMount() {
    this.getList();
  }

  getList() {
    api.$browseList().then((res) => {
      let list = res.result;
      // 1. 找出有哪些日期
      let dateList = list.map((item) => item.updateTime);
      // 2. 对日期列表去重
      let set = new Set(dateList);
      // 3. 把set转成数组
      dateList = [...set];
      // 用来存放处理后的数据
      let newList = [];
      // 对dateList进行遍历,过滤出相同日期的数据
      dateList.forEach((date) => {
        // 从list列表找到日期跟date相同的对象
        let subList = list.filter((item) => item.updateTime === date);
        // 构造对象
        let obj = {
          date,
          subList,
        };
        newList.push(obj);
      });

      this.setState({
        list: newList,
      });
    });
  }

  render() {
    return (
      <ul className="list my-zuji">
        {this.state.list.map((item,index) => (
          <li key={index}>
            <div className="title flex jc-sb pl-15 pr-15 aic">
              <span>{item.date}</span>
              <span className="base">清除</span>
            </div>

            {/* 子列表 */}
            <ul className="sublist">
              {item.subList && item.subList.map((subItem) => (
                <li key={subItem.id} className="item pl-10 pr-10 bg-fff flex jc-sb aic">
                  <img
                    src={subItem.imageUrl}
                    alt=""
                  />
                  <div className="t-box fg1 ml-15 f16 pt-5">
                    <p className="bold">深圳较场尾大鹏古城8房一厅独栋客栈</p>
                    <p className="mt-10">
                      <span>¥2688 </span>
                      <span className="f888 ml-5">人均:141</span>
                    </p>
                  </div>
                </li>
              ))}
            </ul>
          </li>
        ))}
      </ul>
    );
  }
}

export default Browse;
